<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.jobCode' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="jobCode" [(ngModel)]="searchFormConfig.jobCode" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.jobName' | translate }}:</div>
                </d-col>
                <d-col>
                  <input dTextInput name="jobName" [(ngModel)]="searchFormConfig.jobName" (keyup.enter)="refreshTable()" />
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.jobType' | translate }}:</div>
                </d-col>
                <d-col style="width: 164px">
                  <d-select
                    [options]="jobTypeList"
                    name="jobType"
                    [filterKey]="'label'"
                    [allowClear]="true"
                    [(ngModel)]="searchFormConfig.jobType"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    (valueChange)="refreshTable()"
                  >
                    <ng-template let-option="option"> {{ option['label'] }} </ng-template>
                  </d-select>
                </d-col>
                <d-col>
                  <div class="da-header-item-label">{{ 'datadev.runtimeState' | translate }}:</div>
                </d-col>
                <d-col style="width: 164px">
                  <d-select
                    [options]="runtimeStateList"
                    name="runtimeState"
                    [filterKey]="'label'"
                    [allowClear]="true"
                    [(ngModel)]="searchFormConfig.runtimeState"
                    [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                    (valueChange)="refreshTable()"
                  >
                    <ng-template let-option="option"> {{ option['label'] }} </ng-template>
                  </d-select>
                </d-col>
              </d-row>
            </div>
            <div class="header-right">
              <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="refreshTable()">{{
                'app.common.operate.query.label' | translate
              }}</d-button>
              <d-button bsStyle="common" (btnClick)="reset()">{{ 'app.common.operate.reset.label' | translate }}</d-button>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="5">
        <div class="da-list-container" style="min-height: calc(100vh - 204px)">
          <div class="da-list-header">
            <div class="header-left table-title">{{ 'datadev.directory' | translate }}</div>
          </div>
          <d-operable-tree
            #operableTree
            style="padding-top: 12px"
            [tree]="dirList"
            [treeNodeIdKey]="'id'"
            [treeNodeTitleKey]="'directoryName'"
            [treeNodeChildrenKey]="'children'"
            [checkable]="false"
            [draggable]="false"
            [iconTemplatePosition]="'after-checkbox'"
            (nodeSelected)="onDirSelected($event)"
          >
            <ng-template #iconTemplate let-node="node">
              <span class="icon icon-folder" style="padding-left: 6px"></span>
            </ng-template>
            <ng-template #operatorTemplate let-optree let-node="node">
              <span
                *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevDirAdd)"
                class="op-icons icon icon-add"
                (click)="openAddDirDialog($event, node)"
              ></span>
              <span
                *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevDirEdit)"
                class="op-icons icon icon-edit"
                (click)="openEditDirDialog($event, node)"
              ></span>
              <span
                *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevDirDelete)"
                class="op-icons icon icon-close"
                (click)="openDeleteDirDialog($event, node)"
              ></span>
            </ng-template>
          </d-operable-tree>
        </div>
      </d-col>
      <d-col [dSpan]="19">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="header-left table-title">{{ 'datadev.project' | translate }} : {{ defaultProjectCode }}</div>
            <div class="header-right">
              <d-button-group>
                <div
                  dDropDown
                  [closeScope]="'all'"
                  [trigger]="'hover'"
                  appendToBody
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobAdd)"
                >
                  <d-button bsStyle="primary" dDropDownToggle class="devui-dropdown-origin border-remove">
                    {{ 'app.common.operate.new.label' | translate }}
                    <span class="icon-chevron-down"></span>
                  </d-button>
                  <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar devui-dropdown-overlay" role="menu">
                    <li role="menuitem">
                      <a class="devui-dropdown-item">
                        <d-button bsStyle="primary" (btnClick)="openAddJobDialog('r')">
                          {{ 'datadev.job.realtime' | translate }}
                        </d-button>
                      </a>
                    </li>
                    <li role="menuitem">
                      <a class="devui-dropdown-item">
                        <d-button bsStyle="primary" (btnClick)="openAddJobDialog('b')">
                          {{ 'datadev.job.batch' | translate }}
                        </d-button>
                      </a>
                    </li>
                  </ul>
                </div>
                <d-button
                  *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobDelete)"
                  bsStyle="common"
                  (btnClick)="openDeleteJobDialog(dataTable.getCheckedRows())"
                  [disabled]="!dataTableChecked"
                  >{{ 'app.common.operate.delete.label' | translate }}</d-button
                >
              </d-button-group>
            </div>
          </div>
          <div class="list-content" id="dataTableContent">
            <d-data-table
              #dataTable
              [dataSource]="dataTableDs"
              [resizeable]="true"
              [checkable]="true"
              [tableLayout]="'fixed'"
              [scrollable]="true"
              [fixHeader]="true"
              (rowCheckChange)="getDataTableCheckedStatus()"
              (checkAllChange)="getDataTableCheckedStatus()"
              (rowClick)="dataTableRowClick($event.rowItem)"
            >
              <d-column field="jobCode" header="{{ 'datadev.jobCode' | translate }}" [width]="'200px'" [fixedLeft]="'36px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobName" header="{{ 'datadev.jobName' | translate }}" [width]="'200px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobType" header="{{ 'datadev.jobType' | translate }}" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobStatus" header="{{ 'datadev.jobStatus' | translate }}" [width]="'80px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="runtimeState" header="{{ 'datadev.runtimeState' | translate }}" [width]="'100px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.label }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobCrontab" header="{{ 'datadev.jobCrontab' | translate }}" [width]="'120px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="directory" header="{{ 'datadev.directory' | translate }}" [width]="'150px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem?.fullPath }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="jobVersion" header="{{ 'datadev.jobVersion' | translate }}" [width]="'80px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="createTime" header="{{ 'datadev.createTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="updateTime" header="{{ 'datadev.updateTime' | translate }}" [width]="'180px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem | date: 'yyyy-MM-dd HH:mm:ss' }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="remark" header="{{ 'datadev.remark' | translate }}" [width]="'150px'">
                <d-cell>
                  <ng-template let-cellItem="cellItem">{{ cellItem }}</ng-template>
                </d-cell>
              </d-column>
              <d-column field="actions" header="{{ 'app.common.operate.label' | translate }}" [fixedRight]="'0px'" [width]="'130px'">
                <d-cell>
                  <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
                    <div class="btn-group">
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobEdit)"
                        [disabled]="!(rowItem.runtimeState.value == '1' && rowItem.jobStatus.value == '2')"
                        icon="icon-run"
                        bsStyle="text-dark"
                        (btnClick)="openRunJobDialog(rowItem)"
                        title="{{ 'datadev.job.run' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobEdit)"
                        [disabled]="rowItem.runtimeState.value == '1'"
                        icon="icon-stop"
                        bsStyle="text-dark"
                        (btnClick)="openStopJobDialog(rowItem)"
                        title="{{ 'datadev.job.stop' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobEdit)"
                        icon="icon-go-pipeline"
                        bsStyle="text-dark"
                        (btnClick)="openJobWorkbench(rowItem)"
                        title="{{ 'datadev.job.pipeline.define' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobEdit)"
                        icon="icon-edit"
                        bsStyle="text-dark"
                        (btnClick)="openEditJobDialog(rowItem)"
                        title="{{ 'app.common.operate.edit.label' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobEdit)"
                        icon="icon-setup"
                        bsStyle="text-dark"
                        (btnClick)="openJobCrontabSettingDialog(rowItem)"
                        [disabled]="rowItem.jobType.value == 'r'"
                        title="{{ 'datadev.job.crontab.setting' | translate }}"
                      ></d-button>
                      <d-button
                        *ngIf="authService.hasPrivilege(PRIVILEGE_CODE.datadevJobDelete)"
                        icon="icon-delete"
                        bsStyle="text-dark"
                        (btnClick)="openDeleteJobDialog([rowItem])"
                        title="{{ 'app.common.operate.delete.label' | translate }}"
                      ></d-button>
                    </div>
                  </ng-template>
                </d-cell>
              </d-column>
              <ng-template #noResultTemplateRef>
                <div style="text-align: center; margin-top: 20px">{{ 'app.common.noRecord' | translate }}</div>
              </ng-template>
            </d-data-table>
          </div>
          <div class="da-list-footer">
            <div class="footer-left"></div>
            <div class="footer-right">
              <d-pagination
                size=""
                [total]="pager.total"
                [(pageSize)]="pager.pageSize"
                [(pageIndex)]="pager.pageIndex"
                [canViewTotal]="true"
                [canChangePageSize]="true"
                [canJumpPage]="true"
                [maxItems]="5"
                (pageIndexChange)="refreshTable()"
                (pageSizeChange)="refreshTable()"
              >
              </d-pagination>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>
  </div>
</div>
